<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 模态框 -->
    <div class="video-mask" id="videoMask">
        <h3 class="title">放弃可以找到一万个理由，坚持只需一个信念！</h3>
        <!-- 播放 与 文字 -->
        <div class="content">
            <div class="btn">
                <button class="start" id="goOnBtn">
                    <i class="iconfont icon-start"></i>
                    <em class="">继续训练</em>
                </button>
                <button class="end" id="endBtn">
                    <i class="iconfont icon-end"></i>
                    <em class="">结束训练</em>
                </button>
            </div>

            <div class="img-text">
                <img id="img">
                <p>
                    <span class="now">当前：</span>
                    <span class="introduce">----</span>
                </p>
            </div>
        </div>
    </div>
    <main class="train-app dpflex fdcolumn">
        <!-- video -->
        <div class="video flex1">
            <video autoplay muted></video>
        </div>
        <div class="text">
            <p class="num"><span id="nowNum">3</span>/<span id="totalNum">8</span></p>
            <p class="tip introduce">胯关节环绕</p>
        </div>
    </main>
    <footer class="dpflex">
        <!-- 进度条 -->
        <p id="pro" class="pro"></p>

        <span id="backBtn" class="iconfont icon-back"></span>
        <span id="stopBtn" class="iconfont icon-stop1"></span>
        <span id="nextBtn" class="iconfont icon-forward"></span>
    </footer>

</body>

</html>